<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
    <link rel="stylesheet" href="position.css">
</head>

<body>
    <!-- 相对定位 -->
    <!-- <div class="container">
        <div></div>
        <div class="relative"></div>
        <div></div>
        <div></div>
    </div> -->
    <!-- 绝对定位 -->
    <!-- <div class="relative div-init"> -->
    <!-- <div class="absolute"> -->
    <!-- <div class="absolute"></div> -->
    <!-- </div> -->
    <!-- 绝对定位脱离标准流 -->
    <!-- <div class="div-init"></div>
        <div class="div-init"></div>
        <div class="div-init"></div> -->
    </div>

    <!-- 应用：子绝父相 -->
    <div class="slider">
        <div class="indicator"></div>
        <!-- <div class="indicator1"></div> -->
    </div>

    <!-- 固定定位 -->
    <div class="fixed div-init">fixed</div>
</body>

</html>